<!-- #layout name=blank-->
<div id="app">
  <div class="page-header">
    <h1 class="title">Product categories</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>

  <div class="panel panel-default panel-small">
    <div class="panel-heading">
      <a
        href="javascript:;"
        class="btn navbar-btn green"
        @click="onAddNewCategory"
        >Add new category</a
      >
      <template v-if="showFunctionBtn">
        <a
          href="javascript:;"
          class="btn navbar-btn green"
          @click="onAddNewSubCategory"
          >Add sub-category</a
        >
        <a href="javascript:;" class="btn navbar-btn green" @click="onEdit"
          >Edit</a
        >
        <a
          href="javascript:;"
          class="btn navbar-btn red"
          @click="removeCategory"
          >Delete</a
        >
      </template>
    </div>
    <div class="panel-body">
      <div id="categories"></div>
    </div>
  </div>
  <button class="btn green" v-show="isJsTreeChanged" @click="saveCategory"
    >Save</button
  >

  <div
    v-kb-modal="showMultilingualModal"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onHideMultilingualModal"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Multilingual</h4>
        </div>
        <div class="modal-body" v-if="currentCateNames">
          <div
            class="form-group"
            v-for="($data, index) in cultureKeys"
            :key="index"
          >
            <label class="control-label"
              >{{ $data + ' - ' + cultures[$data] }}</label
            >
            <input
              type="text"
              class="form-control"
              v-model="currentCateNames[$data]"
            />
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="onSaveMultilingualModal"
            >Save</button
          >
          <button class="btn grey" @click="onHideMultilingualModal"
            >Cancel</button
          >
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/lib/jstree.min.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js"
    ]);
    Kooboo.loadCSS(["/_Admin/Styles/jstree/style.min.css"]);
  })();
</script>
<script src="/_Admin/View/ECommerce/Product/Categories.js"></script>
